<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript">
    /*
      Promise.all
      Promise.race
    */
    var p1 = new Promise(function (resolve, reject) {
      var xhr = new XMLHttpRequest()
      xhr.open('get', 'http://localhost:8888/api/test1')
      xhr.send(null)
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            var ret = xhr.responseText
            resolve(ret)
          } else {
            reject('出错了')
          }
        }
      }
    })
    var p2 = new Promise(function (resolve, reject) {
      var xhr = new XMLHttpRequest()
      xhr.open('get', 'http://localhost:8888/api/test2')
      xhr.send(null)
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            var ret = xhr.responseText
            resolve(ret)
          } else {
            reject('出错了')
          }
        }
      }
    })
    var p3 = new Promise(function (resolve, reject) {
      var xhr = new XMLHttpRequest()
      xhr.open('get', 'http://localhost:8888/api/test3')
      xhr.send(null)
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            var ret = xhr.responseText
            resolve(ret)
          } else {
            reject('出错了')
          }
        }
      }
    })
    
    // 保证所有任务完成后才可以获取到结果，这种方式触发任务是并发
    // Promise.all([p1, p2, p3]).then(function (result) {
    //   // 这里的结果3秒后才会得到：["tom", "jerry", "spike"]
    //   console.log(result)
    // })

    // 那个任务最先完成，就结束了，并且得到该任务的结果，其他的结果忽略
    Promise.race([p1, p2, p3]).then(function (result) {
      // 这里的结果1秒后会得到：
      console.log(result)
    })
  </script>
</body>
</html>